<%@page import="com.moefor.clover.model.enums.CloverSessionKey"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Date"%>
<%@page import="com.moefor.clover.model.Comment"%>
<%@page import="com.moefor.clover.model.User"%>
<%@page import="com.moefor.clover.model.element.Picture"%>
<%@page import="com.moefor.clover.model.Goods"%>
<%@page import="com.moefor.clover.model.Message"%>
<%@page import="java.util.Set"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<base href="<%=basePath%>">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clover</title>

<link href="res/css/bootstrap.min.css" rel="stylesheet">
<link href="res/css/messenger.css" rel="stylesheet">
<link href="res/css/messenger-theme-block.css" rel="stylesheet">
<style>
body {
	padding-bottom: 30px;
	background: url(res/img/background.gif) repeat 0 0;
}

button {
	outline: none;
}
/***********************nva****************************/
.nav-item:hover {
	background-color: #F0F0F0 !important;
}

.glyphicon {
	top: 3px;
}

.open .dropdown-toggle {
	background: #FFF !important;
}

.dropdown-menu {
	border: 0px;
	margin-top: -1px !important;
}

.dropdown-menu a {
	text-align: center;
}

.control {
	padding: 3px 0px;
	text-align: center;
}

.control a {
	display: inline-block !important;
	width: 60px;
	padding: 0px !important;
	color: #888 !important;
}

#msgs .dropdown-header {
	text-align: center;
	color: #222;
	font-size: 16px;
	font-weight: bold;
}

.msg-item {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.msg-item span {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block !important;
	padding: 0 5px !important;
}

#user-icon a {
	padding: 3px 0 !important;
}

#user-icon a:hover {
	background-color: #FFF;
}
/***********************nva****************************/
/***********************search-box****************************/
.search-box {
	width: 100%;
	height: 100%;
}

.search-box select {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-progress-appearance: none;
	border: solid 3px #FB9000;
	border-right: 0;
	width: 80px;
	height: 100%;
	float: left;
	outline: none;
	background-color: #F5F5F5;
	color: #777;
	padding: 0 10px;
	background-image: url(res/img/down-tag.png);
	background-repeat: no-repeat;
	background-position: right;
}

.search-box select option {
	background-color: #FFF;
}

.search-box input[type="text"] {
	border: solid 3px #FB9000;
	width: calc();
	width: -moz-calc(100% -180px);
	width: -webkit-calc(100% - 180px);
	height: 100%;
	outline: none;
	padding: 0px 5px;
	float: left;
	border-right: 0;
	border-left: 0;
}

.search-box input[type="submit"] {
	width: 100px;
	height: 100%;
	border: 0;
	background-color: #FB9000;
	padding: 0;
	float: left;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	outline: none;
}

.search-box input[type="submit"]:hover {
	background-color: #FDAC3F;
}
/***********************search-box****************************/

/***********************footer****************************/
footer {
	border-top: solid 3px #FB9000;
	padding-top: 20px;
	margin: 40px 0;
}

footer hr {
	margin: 10px 0;
}

footer a {
	color: #777;
	text-decoration: none;
	padding: 0 2px;
}

footer a:hover {
	color: #FB9000;
	text-decoration: none;
}

footer a:link {
	text-decoration: none;
}

footer a:visited {
	color: #777;
}

footer .copyright {
	color: #AAA;
}
/***********************footer****************************/

/***********************carousel****************************/
.modal-dialog {
	width: 80%;
	height: 90%;
	margin: 0 auto;
	margin-top: 2.5%;
}

#carousel-example-generic {
	background: url("res/img/carousel-background.png") repeat 0 0;
	box-shadow: 0 0 10px #ccc;
}

.carousel-inner {
	text-align: center;
}

.carousel-inner img {
	margin: 0 auto;
	cursor: pointer;
}

.carousel-control {
	background: transparent !important;
}

.collect-tag {
	display: inline-block;
	padding-top: 5px;
	color: #888;
}

.collect-tag:hover {
	color: #333;
}

@media screen and (max-width:991px) {
	.carousel-inner img {
		cursor: default;
	}
}
/***********************carousel****************************/
.row {
	padding-top: 20px;
}

.item-info {
	margin-top: 5px;
	background-color: #FFF;
	font-size: 16px;
	padding: 10px 20px;
	box-shadow: 0 0 10px #ccc;
}

.item-name {
	font-size: 22px;
	line-height: 31px;
	font-family: "Microsoft YaHei";
}

.price b {
	font-size: 22px;
	color: #888;
}

.price em {
	color: #F40;
	font-weight: 700;
	font-size: 22px;
	font-style: normal;
	font-family: Verdana;
}

.msg-data {
	width: 100%;
	outline: none;
	padding: 5px;
}

.appointment {
	background-color: #FB9000;
	border-radius: 3px;
	font-size: 18px;
	border: 0;
	height: 47px;
	width: 60%;
	text-align: center;
	margin-left: 20%;
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
		'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
	color: #EEE;
}

.appointment:hover {
	background-color: #FDAC3F;
}

.disable {
	background: #ccc;
}

.disable:hover {
	background: #ccc;
}

.appointment-box {
	padding-top: 15px;
	height: 127px;
	display: none;
}

.appointment-box button {
	float: right;
	border: 0;
	padding: 4px 10px;
	font-size: 14px;
}

.appointment-box .appointment-btn {
	background-color: #FB9000;
	border-radius: 3px;
	color: #EEE;
}

.appointment-box .appointment-btn:hover {
	background-color: #FDAC3F;
}
/************************************************/
.tab-content {
	border-top: solid 3px #FB9000;
}

.nav-tabs .active a {
	background-color: #FB9000 !important;
	color: #EEE !important;
}

.nav-tabs a {
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
		'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
	font-size: 18px;
	color: #666;
}

.tab-pane {
	padding-top: 20px;
}
/************************************************/
#detail-box {
	min-height: 150px;
	width: 100%;
	background-color: #FFF;
	padding: 10px 20px;
	box-shadow: 0 0 10px #ccc;
}

.comment-box {
	background-color: #FFF;
	padding: 10px 20px;
	box-shadow: 0 0 10px #ccc;
}

.comment {
	height: 113px;
}

.comment img {
	width: 72px;
	height: 72px;
	background: url("res/img/default.jpg") no-repeat center;
	background-size: cover;
	vertical-align: top;
}

.comment textarea {
	display: inline-block;
	padding: 5px;
	outline: none;
	margin-left: 10px;
	width: calc(100% - 86px);
	width: -moz-calc(100% - 86px);
	width: -webkit-calc(100% - 86px);
}

.comment span {
	float: right;
	margin-top: 10px;
	margin-right: 10px;
}

.comment input[type="submit"] {
	float: right;
	margin-top: 5px;
	padding: 4px 10px;
	font-size: 14px;
	border: 0;
	background-color: #FB9000;
	border-radius: 3px;
	color: #EEE;
}

.comment input[type="submit"]:hover {
	background-color: #FDAC3F;
}

.comment-group {
	padding: 0 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.comment-group-item {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #222;
	font-size: 13px;
	line-height: 1.7;
	padding: 10px 0;
	word-wrap: break-word;
	list-style: none;
	border-top: solid 1px #ddd;
}

.commenter-icon {
	width: 50px;
	height: 50px;
	vertical-align: top;
	background: url("res/img/default.jpg") no-repeat center;
	background-size: cover;
	vertical-align: top;
}

.comment-detail {
	padding-left: 10px;
	width: calc(100% - 70x);
	width: -moz-calc(100% - 70px);
	width: -webkit-calc(100% - 70px);
	margin-bottom: -7px;
	display: inline-block;
}

.comment-detail div {
	padding-bottom: 3px;
}

.comment-detail span {
	color: #bbb;
}

.comment-footer a {
	float: right;
}

.comment-root {
	display: none;
}

.comment-root input[type="text"] {
	outline: none;
	width: 100%;
	padding: 9px 12px;
	min-height: 38px;
	line-height: 1.4;
	color: #222;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
	box-sizing: border-box;
	background: #fff;
	margin: 10px 0;
}

.comment-root button {
	float: right;
	padding: 4px 10px;
	font-size: 14px;
	border: 0;
}

.comment-btn {
	background-color: #FB9000;
	border-radius: 3px;
	color: #EEE;
}

.comment-btn:hover {
	background-color: #FDAC3F;
}

.canel-btn {
	background: transparent;
	color: #bbb;
}

.canel-btn:hover {
	color: #666;
}
/************************************************/
.other-item-box {
	background-color: #fff;
	box-shadow: 0 0 10px #ccc;
	padding: 10px 20px;
	color: #333;
}

.other-item-box h4 {
	font: 700 16px/20px "Microsoft YaHei";
	color: #333;
	font-weight: bold;
}

.other-item-box a {
	display: inline-block;
	color: #333;
}

.other-item-box a:hover {
	color: #333;
}

.other-item-box .more {
	position: absolute;
	top: 20px;
	right: 40px;
	color: #FB9000;
}

.other-item-box .more:hover {
	color: #FB9000;
}

.other-item-box .col-lg-6 {
	padding-top: 20px;
}

.item-icon {
	width: 80px;
	height: 80px;
	border: solid 1px #ccc;
	background: url("res/img/5.jpg") no-repeat center;
	background-size: cover;
	vertical-align: top;
}

.item-detail {
	width: calc(100% -84px);
	width: -moz-calc(100% -84px);
	width: -webkit-calc(100% - 84px);
	display: inline-block;
}

.other-item-name {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.item-detail b {
	color: #999;
}

.item-detail em {
	color: #F40;
	font-weight: 700;
	font-style: normal;
	font-family: Verdana;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	width: calc(100% -16px);
	width: -moz-calc(100% -16px);
	width: -webkit-calc(100% - 16px);
}
/************************************************/
@media screen and (max-width:991px) {
	.item-info {
		margin-top: 0px;
	}
	.col-md-4 {
		margin-top: 20px;
	}
}
</style>
</head>
<body>
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content" style="width: 100%; height: 100%;">
			</div>
		</div>
	</div>
	<nav id="top" class="navbar navbar-default">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<img style="float: left; height: 50px;" src="res/img/logo.png" /> <a
					class="navbar-brand" href="home.page">Clover</a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">

				<%
                	if(request.getAttribute("user") != null){
                %>
				<ul id="user-nav" class="nav navbar-nav">
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-user" aria-hidden="true"></span>
							${user.username}<span class="caret"></span></a>
						<ul class="dropdown-menu" style="min-width: 130px;" role="menu">
							<li id="user-icon"><a href="userinfo.page"><img
									class="img-circle"
									style="width:120px;height:120px;background:url(${user.avator.url}) no-repeat center;background-size:cover;"
									id="user-icon" /></a></li>
							<li class="control"><a href="userinfo.page">账号管理</a><a
								href="user/signout.do">注销登陆</a></li>
						</ul></li>
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
							消息 <span class="caret"></span></a>
						<ul id="msgs" class="dropdown-menu" role="menu">
							<li class="dropdown-header">未读的新消息</li>
							<%					
		     						Object object = request.getAttribute("msgSet");
		     						if(object != null && !((Set<Message>)object).isEmpty()){
		     							for(Message msg : (Set<Message>)object){
			     							out.print("<li role='separator' class='divider'></li>");
			     							out.print("<li class='msg-item'><span style='width:70%;text-align:left'>"+
			     								msg.getContent()+
			     								"</span><span style='width:30%;'>"+
			     								msg.getSender().getUsername()+	
			     								"</span></li>");
			     							out.print("<li role='separator' class='divider'></li>");
			     						}
		     						}else{
		     							out.print("<li role='separator' class='divider'></li>"+
		     										"<li class='msg-item'><span style='width:70%;text-align:left'>"+
			     									"<span>暂时没有新消息</span>"+
			     									"</span></li>"+
			     									"<li role='separator' class='divider'></li>");						
		     						}
		     	
		     						
		     		
		     	%>
							<li><a id='checkAll' href="userinfo.page#comment"
								style="width: 100%; text-align: center;">查看全部</a></li>
						</ul></li>
				</ul>
				<%
                	}else{
               	%>
				<ul id="visitor-nav" class="nav navbar-nav">
					<li><a class="nav-item" href="sign.page#signin"
						style="color: #D70057;">亲，请先登录</a></li>
					<li><a class="nav-item" href="sign.page">免费注册</a></li>
				</ul>
				<%
               		}
               	%>

				<ul class="nav navbar-nav navbar-right">
					<li><a class="nav-item" href="deal.page"><span
							class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
							我的交易</a></li>
					<li><a class="nav-item" href="onsale.page"><span
							class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span>
							我的寄售</a></li>
					<!-- <li><a class="nav-item" href="favorite.page"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> 我的收藏</a></li>  -->
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>

	<div class="container">
		<div class="row" style="padding: 30px 0;">
			<div class="col-md-6 col-md-offset-3" style="height: 34px;">
				<form class="search-box">
					<select>
						<option value="goods">商品</option>
						<option value="market">Market</option>
					</select> <input type="text" placeholder="Search"> <input
						type="submit" value="搜索">
				</form>
			</div>
		</div>

		<div class="row">
			<div class="col-md-8">
				<div id="carousel-example-generic" class="carousel slide"
					data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						<%
                    	Goods goods = (Goods)request.getAttribute("goods");
                    	for(int i = 0 ; i<goods.getPicItems().size() ; i++){
                    		if(i == 0){
                    			out.print("<li data-target='#carousel-example-generic' data-slide-to='0' class='active'></li>");
                    			continue;
                    		}
                    		out.print("<li data-target='#carousel-example-generic' data-slide-to='" + i + "'></li>");
                    	}
                    %>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<%
                    	boolean flag = true;
                    	for(Picture pic : goods.getPicItems()){
                    		if(flag == true){
                    			out.print("<div class='item active'>"+
	                                        	"<img src='" + pic.getUrl() + "'>"+
                                        	"</div>");
                    			flag = false;
                    			continue;
                    		}
                    		out.print("<div class='item'>"+
                                	"<img src='" + pic.getUrl() + "'>"+
                            	"</div>");
                    	}
                    %>
					</div>

					<!-- Controls -->
					<a class="left carousel-control" href="#carousel-example-generic"
						role="button" data-slide="prev"> <span
						class="glyphicon glyphicon-chevron-left" aria-hidden="true"
						style="backgroudn: 0;"></span> <span class="sr-only">Previous</span>
					</a> <a class="right carousel-control" href="#carousel-example-generic"
						role="button" data-slide="next"> <span id="next-pic-btn"
						class="glyphicon glyphicon-chevron-right" aria-hidden="true"
						style="backgroudn: 0;"></span> <span class="sr-only">Next</span>
					</a>
				</div>
				<!-- 
                <a href="" class="collect-tag"><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> 添加至收藏夹</a>
				 -->
			</div>

			<div class="col-md-4">
				<div class="item-info">
					<p class="item-name"><%=goods.getName() %></p>
					<p class="price">
						转 卖 价： <b>¥ </b><em><%=goods.getPrice() %></em>
					</p>
					<hr>
					<p class="position">
						所在区域：
						<%=goods.getMarketItems().iterator().next().getName() %></p>
					<% User owner = (User)request.getAttribute("owner"); %>
					<p class="contact">
						联系电话：
						<%=owner.getTel() %></p>
					<hr>
					<%
                    String tmpStyle = "disabled style='background-color: #CCC;'";
                    User user = (User)session.getAttribute(CloverSessionKey.USER);
                    if(user != null && user.getId()!=goods.getOwner().getId()){
                    	tmpStyle = null;
                    }
                    %>
					<button class="appointment" <%=tmpStyle %>>预 约 交 易</button>

					<div class="appointment-box">
						<textarea class="msg-data" rows="3"
							placeholder="预约交易请留下您的联系方式和留言。。"></textarea>
						<button class="appointment-btn" data-goods-id="<%=goods.getId()%>">预约</button>
						<button class="canel-btn">取消</button>
					</div>
				</div>
			</div>

		</div>
		<div class="row">
			<div class="col-md-8">
				<div>
					<!-- Nav tabs -->
					<ul class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active"><a href="#detail"
							aria-controls="detail" role="tab" data-toggle="tab">物品详情</a></li>
						<li role="presentation"><a href="#comment"
							aria-controls="comment" role="tab" data-toggle="tab">评 论</a></li>
					</ul>

					<!-- Tab panes -->
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane active" id="detail">
							<div id="detail-box">
								<%=goods.getIntroduction() %>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="comment">
							<div class="comment-box">
								<form class="comment">
									<img
										style="background:url(${user.avator.url}) no-repeat center;background-size:cover;">
									<textarea rows="3" placeholder="请写下您的评论..."></textarea>
									<input type="submit" data-user-id="${user.id }" value="评论">
									<span>0/140</span>
								</form>
								<hr>
								<ul id="comment" class="comment-group">
									<%
                                	Object object = request.getAttribute("commentItems");
                                	if(object != null ){
                                		flag = true;
                                		for(Comment comment : (List<Comment>)object){
    	                            		long tmp = (new Date()).getTime() - comment.getDate().getTime();
    	            						String date;
    	            						if((tmp/24/60/60/1000) >= 1){
    	            							date = tmp/24/60/60/1000 + "天";
    	            						}else if((tmp/60/60/1000) >= 1){
    	            							date = tmp/60/60/1000 + "小时";
    	            						}else if((tmp/60/1000) >= 1){
    	            							date = tmp/60/1000 + "分钟";
    	            						}else{
    	            							date = "1分钟";
    	            						}
    	            						tmpStyle = null;
    	            						if(flag == true){
    	            							tmpStyle = "style='border:0;'";
    	            							flag = false;
        	            						
    	            						}
    	                            		out.print("<li class='comment-group-item' " + tmpStyle + " >"+
    	        				                        "<img class='commenter-icon' style='background:url(" + comment.getAuthor().getAvator().getUrl() + ") no-repeat center;background-size:cover;'>"+
    	        				                        "<div class='comment-detail'>"+
    	        				                            "<div class='comment-header'>"+
    	        				                                "<a href='allsale.page?userid=" + comment.getAuthor().getId() + "'>" + comment.getAuthor().getUsername() + "</a>");
    	                            		if(comment.getReply() !=null){
    	                            							out.print("<span> 回复 </span><a href='allsale.page?userid=" + comment.getReply().getId() + "'>" + comment.getReply().getUsername() + "</a>");			
    	                            		}
    	        				            
    	                            		String tmpStr =null;
    	                            		if(user != null &&user.getId() == comment.getAuthor().getId()){
    	                            			tmpStr = "<span style='float:right' >回复</span>";
    	                            		}else{
    	                            			tmpStr = "<a href='' >回复</a>";
    	                            		}
    	                            		
    	        				           	out.print(                    
    	        				                            "</div>"+
    	        				                            "<div class='comment-content'>"+
    	        				                                comment.getContent()+
    	        				                            "</div>"+
    	        				                            "<div class='comment-footer'>"+
    	        				                                "<span>" + date + "前</span>"+
    	        				                                tmpStr+
    	        				                            "</div>"+
    	        				                            "<div class='comment-root'>"+
    	        				                                "<input type='text' placeholder='请写下您的评论...'>"+
    	        				                                "<button class='comment-btn' data-user-id='" + comment.getAuthor().getId() + "'>评论</button>"+
    	        				                                "<button class='canel-btn'>取消</button>"+
    	        				                            "</div>"+
    	        				                        "</div>"+
    	        				                    "</li>");
    	                            	}
                                	}
	                               
                                %>

								</ul>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="col-md-4">
				<div class="other-item-box">

					<h4>
						卖家的其它闲置<span class='total'>（${otherGoods.size()-1 }）</span>
					</h4>
					<a class="more" href="allsale.page?userid=${owner.id}">更多</a>
					<hr style="margin: 0px;">
					<div class="row" style="padding: 0px;">
						<%
                    	int count = 1;	
                   		for(Goods entity : (Set<Goods>)request.getAttribute("otherGoods")){
                       		if(count>4)
                       			break;
                       		if(entity.getId() == goods.getId()){
                       			continue;
                       		}
                       		out.print("<div class='col-lg-6'>"+
   	        	                        "<a href='item.page?goodsid="+ entity.getId() +"' class='item-icon' style='background:url("+ entity.getPicItems().iterator().next().getUrl() +") no-repeat center;background-size:cover;''></a>"+
   	        	                        "<div class='item-detail' style='margin-left:4px;'>"+
   	        	                            "<a href='item.page?goodsid="+ entity.getId() +"'><div class='other-item-name'>" + entity.getName() + "</div></a>"+
   	        	                            "<p><b>¥ </b><em>" + entity.getPrice() + "</em></p>"+
   	        	                        "</div>"+    
   	        	                    "</div>");
                       		count++;
                       	}
                    %>


					</div>
				</div>
			</div>
		</div>


		<footer>
			<div class="link-group">
				<a href="http://www.jmu.edu.cn/">集美大学</a> <a
					href="http://xtw.jmu.edu.cn/">集美大学校团委</a> <a
					href="http://cec.jmu.edu.cn/">集美大学计算机工程学院</a>
			</div>
			<hr>
			<span class="copyright">© 2016 Clover 版权所有</span>
		</footer>

	</div>


	</div>

	<script src="res/js/jquery.min.js"></script>
	<script src="res/js/bootstrap.min.js"></script>
	<script src="res/js/messenger.min.js"></script>
	<script type="text/javascript">
        $(document).ready(function(){
            var carouselInner = $(".carousel-inner");
            $(window).resize(function(){
                $(".carousel-inner img").each(function(){
                    $(this).css({
                        'height': carouselInner.width()/16*9 + 'px'
                    });                   
                });
            });
            $(window).trigger("resize");
            
            $(".appointment").click(function(){
               var appointment_box = $(".appointment-box");
               if(appointment_box.css("display") == "none"){
                   appointment_box.css({
                       'display':'block'
                   });
               } else{
                   appointment_box.css({
                       'display':'none'
                   });
               }
            });
            $(".appointment-btn").click(function(){
            	if($(".comment input[type='submit']").data('user-id') == ""){
            		$.globalMessenger().post({
                        'message':'您没有登陆哟！',
                        'hideAfter': '1.5',
                        'hideOnNavigate': 'true'
                    });
            		return false;
            	}
            	$.ajax({
        			type:'POST',
        			url:"goods/book.do",
        			data:{"goods_id":$(this).data('goods-id'),"remarks":$(this).prev("textarea").val()},
        			dataType:'JSON',
        			success:function(data){
        				if(data.state){
        					$.globalMessenger().post({
                                'message':data.data,
                                'hideAfter': '1.5',
                                'hideOnNavigate': 'true'
                            });
        	                $(".appointment-box").css({
        	                    'display':'none'
        	                });
        				}else{
        					$.globalMessenger().post({
                                'message':data.data,
                                'hideAfter': '1.5',
                                'hideOnNavigate': 'true'
                            });
        				}
        			}
        		});

            });
            
            $(".carousel-inner img").click(function(){
                if($(window).width()>991){
                    $(".modal-content").css({
                       'background':'url(' + $(this).attr('src') + ') no-repeat center',
                       'background-size':'cover' 
                    });
                    $('#myModal').modal('show');
                }     
            });
            
            $("#myModal").click(function(){
               $(this).modal('hide'); 
               $("#next-pic-btn").trigger('click');
            });
			
            if(location.hash == "#comment"){
            	$(".nav-tabs li a[href='#comment']").click();
            }
            
            $(".comment textarea").keyup(function(){
            	$(".comment span").html($(this).val().length  + "/140");
            });
            
            $(".comment input[type='submit']").click(function(){
            	if($(".comment input[type='submit']").data('user-id') == ""){
            		$.globalMessenger().post({
                        'message':'您没有登陆哟！',
                        'hideAfter': '1.5',
                        'hideOnNavigate': 'true'
                    });
            		return false;
            	}
            	$.ajax({
            		type:'POST',
            		url:'comment/send.do',
          			data:{'goods_id':$('.appointment-btn').data('goods-id'),'content':$('.comment textarea').val(),'reply_user_id':''},
            		success:function(data){
                    	if(data.state){
                    		if(location.href.indexOf("#comment")>0){
                    			location.reload();
                    		}else{
                    			location.href = location.href+"#comment";
                    			location.reload();
                    		}
                    	}else{
                    		$.globalMessenger().post({
                                'message':"评论失败",
                                'hideAfter': '1.5',
                                'hideOnNavigate': 'true'
                            });
                    	}    	
                    	
            		},
            	});
            	return false;
            });
            bind();
        });
        
        $(".search-box input[type='submit']").click(function(){
        	if($(this).prevAll('select').val() == "goods"){
        		location.href = "home.page#keyword=" + $(this).prevAll("input").val();
        	}else{
        		location.href = "home.page#market=" + $(this).prevAll("input").val();
        	}
        	
        	return false;
        });
        $("#checkAll").click(function(){
        	$.ajax({
        		'async':false,
        		'url':'msg/read_all.do'
        	})
        })
        function bind(){
        	$(".comment-footer a").click(function(){
        	    var comment_root = $(this).parent().next(".comment-root");
        	    if(comment_root.css("display") == "none"){
        	        comment_root.css({
        	        'display':'unset'
        	        });
        	    }else{
        	        comment_root.css({
        	            'display':'none'
        	        });
        	    }
        	    return false;
        	});

        	$(".canel-btn").click(function(){
        		
        	    $(this).parent().css({
        	        'display':'none'
        	    });
        	    return false;
        	});

        	$(".comment-btn").click(function(){
        		
            	if($(".comment input[type='submit']").data('user-id') == ""){
            		$.globalMessenger().post({
                        'message':'您没有登陆哟！',
                        'hideAfter': '1.5',
                        'hideOnNavigate': 'true'
                    });
            		return false;
            	}
            	$.ajax({
            		type:'POST',
            		url:'comment/send.do',
          			data:{'goods_id':$('.appointment-btn').data('goods-id'),'content':$(this).prev().val(),'reply_user_id':$(this).data('user-id')},
            		success:function(data){
                    	if(data.state){
                    		if(location.href.indexOf("#comment")>0){
                    			location.reload();
                    		}else{
                    			location.href = location.href+"#comment";
                    			location.reload();
                    		}
                    	}else{
                    		$.globalMessenger().post({
                                'message':"评论失败",
                                'hideAfter': '1.5',
                                'hideOnNavigate': 'true'
                            });
                    	}    	
                    	
            		},
            	});
        	    /* $(this).parent().css({
        	        'display':'none'
        	    }); */
        	    
        	    return false;
        	});
        }
        $._messengerDefaults = {
            extraClasses: 'messenger-fixed messenger-theme-block messenger-on-bottom messenger-on-right'
        }
    </script>
</body>
</html>